<template>
  <el-form
    ref="customForm"
    :model="formData"
    :rules="formRules"
    label-width="110px"
  >
    <el-form-item v-if="action === 'edit'" prop="id">
      <input v-model="formData.id" type="hidden">
    </el-form-item>
    <el-form-item label="名称" prop="title">
      <el-input v-model="formData.title" type="text" placeholder="请输入名称" />
    </el-form-item>
    <el-form-item label="APPID" prop="appId">
      <el-input v-model="formData.appId" type="text" placeholder="请输入公众号appId" />
    </el-form-item>
    <el-form-item label="Secret" prop="secret">
      <el-input v-model="formData.secret" type="text" placeholder="请输入公众号secret" />
    </el-form-item>
    <el-form-item label="Token" prop="token">
      <el-input v-model="formData.token" type="text" placeholder="请输入公众号token" />
    </el-form-item>
    <el-form-item label="AESKEY" prop="aesKey">
      <el-input v-model="formData.aesKey" type="text" placeholder="请输入公众号aesKey" />
    </el-form-item>
    <el-form-item label="回调地址" prop="redirectUri">
      <el-input v-model="formData.redirectUri" type="url" placeholder="请输入认证回调地址">
        <el-tooltip slot="prepend" class="item" effect="dark" content="URL编码" placement="top">
          <el-button type="primary" icon="el-icon-download" @click="encodeUrl" />
        </el-tooltip>
        <el-tooltip slot="append" class="item" effect="dark" content="URL解码" placement="top">
          <el-button type="primary" icon="el-icon-upload2" @click="decodeUrl" />
        </el-tooltip>
      </el-input>
    </el-form-item>
    <el-form-item label="简介" prop="mpDesc">
      <el-input v-model="formData.mpDesc" type="textarea" placeholder="请输入公众号简介" :autosize="{ minRows: 3 }" />
    </el-form-item>
  </el-form>
</template>
<script>
import { get, save, update } from '@/api/wx/mp/mp-config';

export default {
  name: 'WxMpConfigForm',
  components: {
  },
  props: {
    action: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      formRules: {
        title: [
          { required: true, message: '名称不能为空！', trigger: 'blur' }
        ],
        appId: [
          { required: true, message: 'AppId不能为空！', trigger: 'blur' }
        ],
        secret: [
          { required: true, message: 'secret不能为空！', trigger: 'blur' }
        ],
        token: [
          { required: true, message: 'token不能为空！', trigger: 'blur' }
        ],
        redirectUri: [
          { required: true, message: '认证跳转地址不能为空', trigger: 'blur' }
        ]
      },
      formData: {
        id: null,
        title: null,
        appId: null,
        secret: null,
        token: null,
        aesKey: null,
        redirectUri: null,
        mpDesc: null
      }
    };
  },
  methods: {
    getInfo(id) {
      get(id).then(response => {
        const result = response.data;
        if (result.code === 0) {
          this.formData = result.data;
        } else {
          this.$notify.error({
            title: result.code,
            message: result.msg
          });
        }
      });
    },
    handleSubmit() {
      this.$refs.customForm.validate((valid) => {
        if (valid) {
          if (this.action === 'add') {
            save(this.formData).then(response => {
              this.handleResult(response.data);
            });
          } else if (this.action === 'edit') {
            update(this.formData).then(response => {
              this.handleResult(response.data);
            });
          }
        }
      });
    },
    handleResult(obj) {
      if (obj.code === 0) {
        this.$notify({
          title: '提示',
          message: obj.msg,
          type: 'success'
        });
        this.$parent.$parent.$refs.customTable.query();
        this.reset();
        this.$parent.$parent.formInitOption.showModal = false;
      } else {
        this.$notify.error({
          title: obj.code,
          desc: obj.msg
        });
      }
    },
    reset() {
      this.$refs.customForm.resetFields();
    },
    encodeUrl() {
      this.formData.redirectUri = encodeURIComponent(this.formData.redirectUri);
    },
    decodeUrl() {
      this.formData.redirectUri = decodeURIComponent(this.formData.redirectUri);
    }
  }
};
</script>
